﻿@{
    ViewBag.Title = "ScoreBar";
}
@Scripts.Render("~/bundles/jquery")
<h2>成绩统计图</h2>


<div id="c">
    <div id="container1" style="min-width:400px;height:400px"></div>
    <div id="container2" style="min-width:400px;height:400px"></div>
    <div id="container3" style="min-width:400px;height:400px"></div>

</div>
<script type="text/javascript">
    
    $(function () {

        var id =@ViewBag.id;
        var c=  @ViewBag.c;
        for (var i = 1; i <= c; i++) {

            var pd = { "id": id, "cid": i };
            $.ajax({
                type: "post",
                url: "/Score/getdata",
                datatype: "json",
                data: pd,
                async: false,
                success: function (result) {
                    /*$.each(result, function (index, data) {
                        alert(data[0])
                       
                    });*/


                    // alert(datas[0])
                    console.log(result);
                    //alert(result);
                    var nid = 'container' + i ;
                    if (i == 1) {
                        var title = '语文分数段统计图';
                    }
                    if (i == 2) {
                        var title = '数学分数段统计图';
                    }
                    if (i == 3) {
                        var title = '英语分数段统计图';
                    }
                    bar(result, title, nid);
                },
            });
        }


    });

   


    function bar(data,title,id) {
        var chart = Highcharts.chart(id, {
        chart: {
            type: 'column'
        },
        title: {
            text: title
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '一班', '二班', '三班', '四班', '五班', '六班', '七班', '八班', '九班', '十班', '十一班', '十二班'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '人数 (个)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
        name: '>=90',
            data:data[0]
        }, {
        name: '>=80',
            data: data[1]
        }, {
        name: '>=70',
            data:data[2]
        }, {
         name: '>=60',
            data: data[3]
        }, {
         name: '<60',
            data:data[4]
        }]
    });
    }
    

</script>
